<!-- QuantityControl.vue -->
<template>
  <div class="quantity-control">
    <el-button 
      :disabled="modelValue <= min" 
      @click="handleChange(modelValue - 1)"
      size="small" 
      class="control-btn"
    >
      -
    </el-button>
    
    <el-input-number
      :model-value="modelValue"
      @change="handleChange"
      :min="min"
      :max="max"
      controls-position="right"
      size="small"
      class="quantity-input"
    />
    
    <el-button 
      :disabled="modelValue >= max" 
      @click="handleChange(modelValue + 1)"
      size="small" 
      class="control-btn"
    >
      +
    </el-button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  },
  min: {
    type: Number,
    default: 1
  },
  max: {
    type: Number,
    default: 100
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const handleChange = (newValue) => {
  const clampedValue = Math.max(props.min, Math.min(props.max, Number(newValue)))
  if (clampedValue !== props.modelValue) {
    emit('update:modelValue', clampedValue)
    emit('change', clampedValue)
  }
}
</script>

<style scoped>
/* 样式同上 */
</style>
